<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" integrity="sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"tallgy.gitee.io","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"}}</script><script src="/js/config.js"></script>
<meta name="description" content="只是一个知识的搬运工">
<meta property="og:type" content="website">
<meta property="og:title" content="tallgy&#39;s blog">
<meta property="og:url" content="http://tallgy.gitee.io/page/5/index.html">
<meta property="og:site_name" content="tallgy&#39;s blog">
<meta property="og:description" content="只是一个知识的搬运工">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="tallgy">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://tallgy.gitee.io/page/5/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":true,"isPost":false,"lang":"zh-CN","comments":"","permalink":"","path":"page/5/index.html","title":""}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>tallgy's blog</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">tallgy's blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>







</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-overview-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">tallgy</p>
  <div class="site-description" itemprop="description">只是一个知识的搬运工</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">107</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">32</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">74</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner index posts-expand">

    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2022/01/20/%E6%B5%8F%E8%A7%88%E5%99%A8/%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2022/01/20/%E6%B5%8F%E8%A7%88%E5%99%A8/%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2/" class="post-title-link" itemprop="url">媒体查询</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2022-01-20 17:21:40" itemprop="dateCreated datePublished" datetime="2022-01-20T17:21:40+08:00">2022-01-20</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="css-媒体查询的问题"><a href="#css-媒体查询的问题" class="headerlink" title="css 媒体查询的问题"></a>css 媒体查询的问题</h1><p>最近在开发项目时，对于项目的适配，发现了一个关于媒体查询的问题</p>
<p>就是在电脑端，放大了浏览器，然后对应的媒体查询也会进行改变，</p>
<p>比如</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">@media screen and (min-width: 300px) &#123;&#125;</span><br></pre></td></tr></table></figure>

<p>上面这个是 最小宽度300 时进行调用，但是如果我们开始的屏幕宽度是350，是满足的，但是我们放大浏览器导致了屏幕放大，就会出现可能屏幕像素没有350的情况，这个就是媒体查询的问题，具体原因没有了解，但是因为媒体查询导致了出现屏幕放大会变成移动端的样式，所以要慎用。</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2022/01/20/Vue/vue-css%E5%A4%96%E9%83%A8%E5%BC%95%E5%85%A5/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2022/01/20/Vue/vue-css%E5%A4%96%E9%83%A8%E5%BC%95%E5%85%A5/" class="post-title-link" itemprop="url">vue-css外部引入</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2022-01-20 16:48:04" itemprop="dateCreated datePublished" datetime="2022-01-20T16:48:04+08:00">2022-01-20</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="vue的css样式-进行外部引入问题"><a href="#vue的css样式-进行外部引入问题" class="headerlink" title="vue的css样式 进行外部引入问题"></a>vue的css样式 进行外部引入问题</h1><p>最近在项目开发中出现了如下的问题</p>
<p>​    就是 vue的样式 style 使用 scoped 进行了 私有化属性，但是却发现，我内部的一个组件的样式还是被其他地方影响了，所以记录一下问题原因</p>
<p>原因：</p>
<p>​    因为 style 样式是通过 @import 进行的引入，所以就会出现私有化属性不起作用，原因的话，应该是@imort引入是一个属于重新请求的过程？（应该是）所以就绕过了 vue-loader 进行属性私有化过程，导致了样式变成了全局化</p>
<p>方法：</p>
<p>​    其实也没有什么方法，要不就是直接写在 style 里面，要不就是使用 src进行引入，这样引入的样式就不会出现全局污染</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;style scoped src=&quot;~/static/css/xxx.css&quot;&gt;&lt;/style&gt;</span><br></pre></td></tr></table></figure>



<p>同时也记录一下， style是可以同时写多个的，但是 scripte 一个vue文件里面只能写一个，因为需要 export导出的属性。</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2022/01/19/JavaScript/%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%96%B9%E6%B3%95/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2022/01/19/JavaScript/%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%96%B9%E6%B3%95/" class="post-title-link" itemprop="url">对象的方法</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2022-01-19 18:01:31" itemprop="dateCreated datePublished" datetime="2022-01-19T18:01:31+08:00">2022-01-19</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2022/01/19/JavaScript/%E9%9A%8F%E7%AC%94/js%E9%81%8D%E5%8E%86%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%96%B9%E6%B3%95/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2022/01/19/JavaScript/%E9%9A%8F%E7%AC%94/js%E9%81%8D%E5%8E%86%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%96%B9%E6%B3%95/" class="post-title-link" itemprop="url">js遍历对象的方法</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2022-01-19 17:32:25" itemprop="dateCreated datePublished" datetime="2022-01-19T17:32:25+08:00">2022-01-19</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="JavaScript-遍历对象的方法"><a href="#JavaScript-遍历对象的方法" class="headerlink" title="JavaScript 遍历对象的方法"></a>JavaScript 遍历对象的方法</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Object.keys</span><br><span class="line">forin</span><br><span class="line">Object.getOwnPropertyNames</span><br></pre></td></tr></table></figure>



<h2 id="Object-keys"><a href="#Object-keys" class="headerlink" title="Object.keys"></a>Object.keys</h2><p>使用 Object.keys，会返回一个数组，数组是一个由键构成的</p>
<p>元素均为对象自身的，可枚举的属性</p>
<p>​    代表了，不会查找原型链，以及需要可枚举</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">const obj = &#123;</span><br><span class="line">	a: 1</span><br><span class="line">&#125;</span><br><span class="line">const pro = &#123;</span><br><span class="line">	b: 2</span><br><span class="line">&#125;</span><br><span class="line">obj.__proto__ = pro</span><br><span class="line"></span><br><span class="line">Object.keys(obj).log</span><br><span class="line">	a</span><br></pre></td></tr></table></figure>



<h2 id="forin"><a href="#forin" class="headerlink" title="forin"></a>forin</h2><p>forin循环，获取的是key值，会向原型链进行获取。但是不会查找不可枚举的属性</p>
<p>​    可以使用 hasOwnProperty 来判断该属性是否是属于自身的。同时 hasOwnProperty 对于不可枚举的也是可以进行判断的。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">const obj = &#123;</span><br><span class="line">	a: 1</span><br><span class="line">&#125;</span><br><span class="line">const pro = &#123;</span><br><span class="line">	b: 2</span><br><span class="line">&#125;</span><br><span class="line">obj.__proto__ = pro</span><br><span class="line">Object.defineProperty(obj, &#x27;c&#x27;, &#123;value: 3, enumerable: false&#125;) // 不可枚举属性</span><br><span class="line"></span><br><span class="line">for key in obj</span><br><span class="line">	log.key</span><br><span class="line">	log.obj[key]</span><br><span class="line">	log.obj.hasOwnProperty(key)</span><br><span class="line">  a, b</span><br></pre></td></tr></table></figure>



<h2 id="Object-getOwnPropertyNames"><a href="#Object-getOwnPropertyNames" class="headerlink" title="Object.getOwnPropertyNames"></a>Object.getOwnPropertyNames</h2><p>返回自身的属性数组，不包括原型链</p>
<p>但是包括不可枚举属性</p>
<p>同时对于一个数组，他的 getOwnPropertyNames 有length，说明了这个length是存在于自身的</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">const obj = &#123;</span><br><span class="line">	a: 1</span><br><span class="line">&#125;</span><br><span class="line">const pro = &#123;</span><br><span class="line">	b: 2</span><br><span class="line">&#125;</span><br><span class="line">obj.__proto__ = pro</span><br><span class="line">Object.defineProperty(obj, &#x27;c&#x27;, &#123;value: 3, eumerable: false&#125;)	// 添加一个不可枚举属性</span><br><span class="line"></span><br><span class="line">Object.getOwPropertyNames(obj)</span><br><span class="line">	a, c</span><br></pre></td></tr></table></figure>



<h2 id="题外话：forof"><a href="#题外话：forof" class="headerlink" title="题外话：forof"></a>题外话：forof</h2><p>forof 其实在前面就已经说过了，这个是一个根据迭代器进行的循环</p>
<p>面试也问过，为什么forin可以遍历数组，当时我的理解是 forin 实际上并不是遍历数组，他是遍历一个对象，现在我也是这样认为的，我认为forin 不是遍历数组，他内部的遍历实际是对象，只是因为js的任何都是对象的原因，所以 forin 遍历数组获取到的下标，这样一看，他不是很像是对象的键吗，数组只是存在了一个length方法。而对象没有而已。</p>
<p>我认为forof才是JavaScript对于遍历数组而创建一个方式，因为forof使用的迭代器，是数组才有的，创建的对象是没有的，当然这个我们也能进行自己编写，具体的可以看看前面写的 迭代器部分。</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2022/01/12/%E9%9A%8F%E7%AC%94/nuxt%E6%89%93%E5%8C%85%E6%96%87%E4%BB%B6hash/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2022/01/12/%E9%9A%8F%E7%AC%94/nuxt%E6%89%93%E5%8C%85%E6%96%87%E4%BB%B6hash/" class="post-title-link" itemprop="url">nuxt打包文件hash</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2022-01-12 17:56:45" itemprop="dateCreated datePublished" datetime="2022-01-12T17:56:45+08:00">2022-01-12</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="nuxt-打包文件hash"><a href="#nuxt-打包文件hash" class="headerlink" title="nuxt 打包文件hash"></a>nuxt 打包文件hash</h1><p>问题来源</p>
<p>因为项目要读取图片并进行显示，然后，我发现可以在本地运行，但是却在打包之后图片没有显示，仔细一看，人家的打包文件带了hash名，所以你的名字不能命中了</p>
<h2 id="为什么需要hash"><a href="#为什么需要hash" class="headerlink" title="为什么需要hash"></a>为什么需要hash</h2><p>既然知道了文件名被hash了，那么我们进一步思考，为什么需要进行hash呢，</p>
<p>对文件名进行一个hash，可以说是一个非常机智的一个方法，因为我们为了能够在网络的传输可以快点，所以我们就想了一个办法，那就是使用缓存，说到缓存，那就不得不说强缓存和协商缓存了。</p>
<p>​        强缓存会直接在文件没有过时的时候不用向服务器进行请求，便可以得到资源，可以减少很多网络的传输，</p>
<p>​        协商缓存会在将文件的etag和last-modified发给服务器，服务器通过比对这两个值来判断文件是否被修改，只要文件没有被修改，那么客户端就会使用本地的资源，这样虽然进行了请求，但是却减少了网络的资源传输</p>
<p>知道了强缓存和协商缓存，那么，什么是hash呢？</p>
<p>​        在此之前，我们先思考一个问题，对于一个项目，在你上线了之后，出现了bug，需要进行更改，但是此时对应的文件处于强缓存阶段，那么如何才能判断文件是否被修改了，此时就需要使用hash了，因为对于文件发生了更改，hash的名字也会对应发生改变，然后此时就获取到了新的文件。</p>
<p>说完之后，就是解决 nuxt默认配置的hash了</p>
<p>​        这个其实在 nuxt 官网就已经说完了，我们如果想要取消hash，也只需要将 contenthash:7 改为 name 就会变成名字，而不会携带7位hash了。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://www.nuxtjs.cn/api/configuration-build#filenames</span><br></pre></td></tr></table></figure>


      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2022/01/11/%E9%9A%8F%E7%AC%94/other/jet-brains%E6%96%87%E4%BB%B6%E5%86%85%E5%AE%B9%E7%9A%84%E6%AD%A3%E5%88%99%E6%9F%A5%E6%89%BE%E5%92%8C%E6%9B%BF%E6%8D%A2/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2022/01/11/%E9%9A%8F%E7%AC%94/other/jet-brains%E6%96%87%E4%BB%B6%E5%86%85%E5%AE%B9%E7%9A%84%E6%AD%A3%E5%88%99%E6%9F%A5%E6%89%BE%E5%92%8C%E6%9B%BF%E6%8D%A2/" class="post-title-link" itemprop="url">jet-brains文件内容的正则查找和替换</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2022-01-11 14:40:44" itemprop="dateCreated datePublished" datetime="2022-01-11T14:40:44+08:00">2022-01-11</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="jet-brains-webStore的正则查找"><a href="#jet-brains-webStore的正则查找" class="headerlink" title="jet-brains webStore的正则查找"></a>jet-brains webStore的正则查找</h1><p><img src="/.io//jet-brains%E6%96%87%E4%BB%B6%E5%86%85%E5%AE%B9%E7%9A%84%E6%AD%A3%E5%88%99%E6%9F%A5%E6%89%BE%E5%92%8C%E6%9B%BF%E6%8D%A2%5Cimage-20220111144213336.png" alt="image-20220111144213336"></p>
<p>在 ctrl+f 之后，选择这个 .* 或者是 reg 的就是正则的。这个其实也没有什么</p>
<p>重点来了！！正则的替换</p>
<h1 id="正则替换"><a href="#正则替换" class="headerlink" title="正则替换"></a>正则替换</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">aaaaa(.*)ccc(.*)</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xxx$2aa$1z</span><br></pre></td></tr></table></figure>

<p>使用 () 将要保留的元素给记录下来，然后再在下面使用 $1/2/3 来进行获取对应的值来进行替换</p>
<p><img src="/.io//jet-brains%E6%96%87%E4%BB%B6%E5%86%85%E5%AE%B9%E7%9A%84%E6%AD%A3%E5%88%99%E6%9F%A5%E6%89%BE%E5%92%8C%E6%9B%BF%E6%8D%A2%5Cimage-20220111144549850.png" alt="image-20220111144549850"></p>
<p><img src="/.io//jet-brains%E6%96%87%E4%BB%B6%E5%86%85%E5%AE%B9%E7%9A%84%E6%AD%A3%E5%88%99%E6%9F%A5%E6%89%BE%E5%92%8C%E6%9B%BF%E6%8D%A2%5Cimage-20220111144559970-16418835623721.png" alt="image-20220111144559970"></p>
<p>这样就能给替换成功了，很是方便。</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2022/01/08/%E9%9A%8F%E7%AC%94/uni-app-projec%E7%AC%94%E8%AE%B0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2022/01/08/%E9%9A%8F%E7%AC%94/uni-app-projec%E7%AC%94%E8%AE%B0/" class="post-title-link" itemprop="url">uni-app-projec笔记</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2022-01-08 16:44:02" itemprop="dateCreated datePublished" datetime="2022-01-08T16:44:02+08:00">2022-01-08</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="uni-app-项目开发笔记问题"><a href="#uni-app-项目开发笔记问题" class="headerlink" title="uni-app 项目开发笔记问题"></a>uni-app 项目开发笔记问题</h1><h2 id="不要挂载原型链"><a href="#不要挂载原型链" class="headerlink" title="不要挂载原型链"></a>不要挂载原型链</h2><p>将对象挂载在原型链是一个大忌，并且vue2也有警告，因为这样对于维护是一个非常大的问题，使用 forin会将内容显示出来</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Object.prototype.a = &#123;&#125;</span><br></pre></td></tr></table></figure>



<h2 id="sass的使用"><a href="#sass的使用" class="headerlink" title="sass的使用"></a>sass的使用</h2><p>对于根项目的 uni.scss 我们在使用的时候不需要进行引入。</p>
<p>项目的 node_modules vue-cli-plugin-uni/lib/options.js 里面有引入</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://uniapp.dcloud.io/collocation/uni-scss</span><br></pre></td></tr></table></figure>



<h2 id="tabBar"><a href="#tabBar" class="headerlink" title="tabBar"></a>tabBar</h2><p>微信小程序的tabBar可以使用 page.json里面进行配置，不需要自己定义组件</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://uniapp.dcloud.io/collocation/pages?id=tabbar</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	&quot;tabBar&quot;: &#123;</span><br><span class="line">		&quot;color&quot;: &quot;#808080&quot;,</span><br><span class="line">		&quot;selectedColor&quot;: &quot;#007aff&quot;,</span><br><span class="line">		&quot;backgroundColor&quot;: &quot;#f8f8f8&quot;,</span><br><span class="line">		&quot;list&quot;: [</span><br><span class="line">			&#123;</span><br><span class="line">				&quot;text&quot;: &quot;主页&quot;,</span><br><span class="line">				&quot;iconPath&quot;: &quot;static/img/tab-bar/tab-bar-unselect.png&quot;,</span><br><span class="line">				&quot;selectedIconPath&quot;: &quot;static/img/tab-bar/tab-bar-select.png&quot;</span><br><span class="line">			&#125;</span><br><span class="line">		]</span><br><span class="line">	&#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>几个比较重要的属性</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">文字颜色</span><br><span class="line">color</span><br><span class="line">selectedColor</span><br><span class="line">背景颜色</span><br><span class="line">backgroundColor</span><br><span class="line"></span><br><span class="line">tab列表，是一个数组</span><br><span class="line">list</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">list</span><br><span class="line">是一个数组，每个元素都是对象</span><br><span class="line"></span><br><span class="line">pagePath</span><br><span class="line">text</span><br><span class="line">iconPath</span><br><span class="line">selectedIconPath</span><br></pre></td></tr></table></figure>



<h2 id="路由-router"><a href="#路由-router" class="headerlink" title="路由 router"></a>路由 router</h2><p>微信小程序 没有路由</p>
<p>对应的在 pages.json 的 pages 里面可以进行配置，</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&quot;pages&quot;: [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages</span><br><span class="line">  &#123;</span><br><span class="line">    &quot;path&quot;: &quot;pages/index/index&quot;,</span><br><span class="line">    &quot;style&quot;: &#123;</span><br><span class="line">      &quot;navigationBarTitleText&quot;: &quot;uni-app&quot;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">],</span><br></pre></td></tr></table></figure>


      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/12/28/Node%20JS/NodeJS%E4%B8%8B%E8%BD%BD%E5%92%8Cnpm%E5%AE%89%E8%A3%85/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/12/28/Node%20JS/NodeJS%E4%B8%8B%E8%BD%BD%E5%92%8Cnpm%E5%AE%89%E8%A3%85/" class="post-title-link" itemprop="url">NodeJS下载和npm安装和配置</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-12-28 11:36:56" itemprop="dateCreated datePublished" datetime="2021-12-28T11:36:56+08:00">2021-12-28</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="NodeJS下载和npm安装"><a href="#NodeJS下载和npm安装" class="headerlink" title="NodeJS下载和npm安装"></a>NodeJS下载和npm安装</h1><p>下载 NodeJS，没啥，直接官网进入，下载包</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://nodejs.org/zh-cn/download/</span><br></pre></td></tr></table></figure>



<p>一路安装，node 安装会自动安装 npm</p>
<p>安装完成之后</p>
<p>通过在 cmd 使用 来判断是否安装完成</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm -v</span><br><span class="line">node -v</span><br></pre></td></tr></table></figure>



<h2 id="修改安装路径"><a href="#修改安装路径" class="headerlink" title="修改安装路径"></a>修改安装路径</h2><h3 id="查看路径"><a href="#查看路径" class="headerlink" title="查看路径"></a>查看路径</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm prefix -g</span><br></pre></td></tr></table></figure>



<h3 id="修改路径"><a href="#修改路径" class="headerlink" title="修改路径"></a>修改路径</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">这个是全局安装时的路径，使用全局安装会将其安装在这里，当然你也可以直接安装在nodejs这个目录就行，不需要更深层的目录。但是这样不方便查看和删除。</span><br><span class="line">npm config set prefix “D:\Software\nodejs\node_global”</span><br><span class="line">这个是缓存的路径，npm会生成缓存。用于更快的进行启动和操作。</span><br><span class="line">npm config set cache “D:\Software\nodejs\node_cache”</span><br></pre></td></tr></table></figure>



<p>配置环境变量</p>
<p><img src="/.io//NodeJS%E4%B8%8B%E8%BD%BD%E5%92%8Cnpm%E5%AE%89%E8%A3%85%5Cimage-20211228140948410-16406717947501.png" alt="image-20211228140948410"></p>
<p>然后点击确定保存即可。</p>
<h3 id="配置镜像"><a href="#配置镜像" class="headerlink" title="配置镜像"></a>配置镜像</h3><p>我们先配置一个镜像然后再安装一个源管理工具nrm</p>
<p>这个是一个淘宝的镜像源</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm config set registry=https://registry.npm.taobao.org</span><br></pre></td></tr></table></figure>



<h3 id="安装nrm"><a href="#安装nrm" class="headerlink" title="安装nrm"></a>安装nrm</h3><p>如果出现操作错误，试试使用管理员的cmd进行操作</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -g nrm</span><br></pre></td></tr></table></figure>



<h3 id="使用nrm"><a href="#使用nrm" class="headerlink" title="使用nrm"></a>使用nrm</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">nrm ls</span><br><span class="line">输出nrm的一个镜像仓库</span><br><span class="line"></span><br><span class="line">nrm use xxx</span><br><span class="line">使用这个xxx镜像</span><br><span class="line"></span><br><span class="line">nrm add name url</span><br><span class="line">添加一个镜像仓库，名字是name，地址是url</span><br><span class="line"></span><br><span class="line">nrm del xx</span><br><span class="line">删除xx仓库</span><br></pre></td></tr></table></figure>




      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/12/14/Vue/vue3%E8%BF%81%E7%A7%BB%E6%8C%87%E5%8D%97/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/12/14/Vue/vue3%E8%BF%81%E7%A7%BB%E6%8C%87%E5%8D%97/" class="post-title-link" itemprop="url">vue3迁移指南</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-12-14 14:51:47" itemprop="dateCreated datePublished" datetime="2021-12-14T14:51:47+08:00">2021-12-14</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/Vue/Vue3/" itemprop="url" rel="index"><span itemprop="name">Vue3</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h1><h2 id="快速开始"><a href="#快速开始" class="headerlink" title="快速开始"></a>快速开始</h2><p>​        CDN，Codepen，CodeSandbox</p>
<ul>
<li>通过 CDN：<code>&lt;script src=&quot;https://unpkg.com/vue@next&quot;&gt;&lt;/script&gt;</code></li>
<li><a target="_blank" rel="noopener" href="https://codepen.io/yyx990803/pen/OJNoaZL">Codepen</a> 上的浏览器内试验田</li>
<li><a target="_blank" rel="noopener" href="https://v3.vue.new/">CodeSandbox</a> 上的浏览器内沙盒</li>
</ul>
<p>使用脚手架 vite 或者 vue-cli</p>
<h2 id="用于迁移的构建版本"><a href="#用于迁移的构建版本" class="headerlink" title="用于迁移的构建版本"></a>用于迁移的构建版本</h2><p>​        如果你打算要将一个基于 Vue 2 的项目或者库升级到 Vue 3，我们提供了一个与 Vue 2 API 兼容的 Vue 3 构建版本，详情见<a target="_blank" rel="noopener" href="https://v3.cn.vuejs.org/guide/migration/migration-build.html">用于迁移的构建版本</a>。</p>
<h3 id="值得注意的新特性"><a href="#值得注意的新特性" class="headerlink" title="值得注意的新特性"></a>值得注意的新特性</h3><ul>
<li>组合式API<ul>
<li>使用了 setup 方法。在组件创建之前执行，一旦 props 被解析就将作为组合式API的入口。</li>
<li><code>setup</code> 选项是一个接收 <code>props</code> 和 <code>context</code> 的函数，我们将在<a target="_blank" rel="noopener" href="https://v3.cn.vuejs.org/guide/composition-api-setup.html#%E5%8F%82%E6%95%B0">之后</a>进行讨论。</li>
<li>我们将 <code>setup</code> 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">// 在我们的组件内</span><br><span class="line">setup (props) &#123;</span><br><span class="line">  let repositories = []</span><br><span class="line">  const getUserRepositories = async () =&gt; &#123;</span><br><span class="line">    repositories = await fetchUserRepositories(props.user)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  return &#123;</span><br><span class="line">    repositories,</span><br><span class="line">    getUserRepositories // 返回的函数与方法的行为相同</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>​        但是此时的 repositories 变量是非响应式的。此时就需要使用 ref 函数使任何响应式变量在 ref 函数中起作用。</p>
<p>带 ref 的响应式变量</p>
<p>​        ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值：</p>
<p>​    将值封装在对象中，看似没有必要，但是为了保持 JavaScript 中不同数据类型的行为统一，这个是必须的。为了将所有类型都变成引用传递，而不是分为了值传递和引用传递。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">const counter = ref(0)</span><br></pre></td></tr></table></figure>





<h1 id="用于迁移的构建版本-1"><a href="#用于迁移的构建版本-1" class="headerlink" title="用于迁移的构建版本"></a>用于迁移的构建版本</h1><p>​        </p>
<h1 id="细节"><a href="#细节" class="headerlink" title="细节"></a>细节</h1>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/19/%E9%9A%8F%E7%AC%94/nginx%E7%9A%84%E4%BD%BF%E7%94%A8/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/11/19/%E9%9A%8F%E7%AC%94/nginx%E7%9A%84%E4%BD%BF%E7%94%A8/" class="post-title-link" itemprop="url">nginx的使用</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-19 23:22:14" itemprop="dateCreated datePublished" datetime="2021-11-19T23:22:14+08:00">2021-11-19</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/page/4/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/4/">4</a><span class="page-number current">5</span><a class="page-number" href="/page/6/">6</a><span class="space">&hellip;</span><a class="page-number" href="/page/11/">11</a><a class="extend next" rel="next" href="/page/6/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
  </nav>

</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">tallgy</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  





  





</body>
</html>
